<template>
    <component :is="'v-' + type" ref="iRef" flex>
        <template v-for="(_,name) of $slots" v-slot:[name]="binds">
            <slot :name="name" v-bind="binds" />
        </template>
    </component>
</template>

<script>
    import { defineAsyncComponent, getCurrentInstance, ref, warn, watch } from "vue";

    export default {
        props: ['type'],
        components: {
            'v-text': defineAsyncComponent(() => import("./implements/text/text.vue")),
            'v-select': defineAsyncComponent(() => import("./implements/select/select.vue")),
            'v-checkbox': defineAsyncComponent(() => import("./implements/checkbox/checkbox.vue")),
            'v-radio': defineAsyncComponent(() => import("./implements/radio/radio.vue")),
            'v-date': defineAsyncComponent(() => import("./implements/date/date.vue")),
            'v-date-range': defineAsyncComponent(() => import("./implements/date-range/date-range.vue")),
            'v-live-search': defineAsyncComponent(() => import("./implements/live-search/live-search.vue")),
            'v-multiple-search': defineAsyncComponent(() => import("./implements/multiple-search/multiple-search.vue")),
            'v-number': defineAsyncComponent(() => import("./implements/number/number.vue")),
            'v-time': defineAsyncComponent(() => import("./implements/time/time.vue")),
            'v-switch': defineAsyncComponent(() => import("./implements/switch/switch.vue")),
        },
        setup(props, { emit }) {
            if (process.env.NODE_ENV === 'development') {
                const { type } = getCurrentInstance();
                if (!type.components['v-' + props.type]) {
                    warn(`无法找到 <form-item type="${props.type}"> 请检查类型`);
                }
            }
            const iRef = ref();
            const stopWatch = watch(iRef, () => { // 等待实例加载完成
                if (iRef.value) {
                    stopWatch();
                    emit('load', iRef.value);
                }
            })
            return { iRef };
        }
    };
</script>